<template>
  <q-tabs
    v-if="!props.hideTabLabel || inDesign"
    :style="{ opacity: props.hideTabLabel && inDesign ? 0.5 : 1 }"
    :modelValue="props.modelValue"
    @update:modelValue="v => emit('update:modelValue', v)"
    class="bg-white text-grey-10"
    :active-color="activeColor"
    :indicator-color="activeColor"
    :align="align"
    mobile-arrows
    :left-icon="`${TComponents?.IconList?.common??'fas dx-icon'} ${TComponents?.IconList?.arrowLeft??'icon-t-arrow-left'}`"
    :right-icon="`${TComponents?.IconList?.common??'fas dx-icon'} ${TComponents?.IconList?.arrowRight??'icon-t-arrow-right'}`"
    inline-label
    :narrow-indicator="props.narrowIndicator"
    shrink
    :dense="props.dense"
    :vertical="props.vertical"
    tabIndex="-1"
  >
    <q-tab
      v-for="(item, index) in props.staticItems"
      :ripple="false"
      :name="index"
      :label="item.label"
      :icon="item.icon || undefined"
      :tabIndex="props.tabIndex"
      @mousedown="v => inDesign && emit('update:modelValue', index)"
    />
  </q-tabs>
</template>

<!-- ts只是方便开发提示和补全代码，没有用语法 -->

<script setup type="typescript">
import { computed, watch } from 'vue';
// 钩子函数、小工具
import { useQuasar } from '@teld/q-components';
// 组件
import QTabs, { QTab } from '@teld/q-components/Tabs';
// 内部子组件通用样式
import sharedProps from './props';

const $q = useQuasar();

// 是否设计时
const inDesign = !!window['fas']?.inDesign;

// 组件传参
const props = defineProps(
	{
		...sharedProps,
		modelValue: Number,
		vertical: Boolean,
		dense: Boolean,
		narrowIndicator: Boolean,
		forcedPc: {
			type: Boolean,
			default: true
		},
		tabIndex: [Number, String]
	}
);
// 浏览宽度低于768px
const isMobile = computed((() => !props.forcedPc && $q.screen.xs) || $q.platform.is.mobile);

const align = computed(() => isMobile.value ? 'center' : 'left');

const activeColor = computed(() => {
	const { activeColor } = props;
	// alert(activeColor)
	if (!activeColor || activeColor === 'default') return 'teld_primary';
	return activeColor;
});

const emit = defineEmits(['update:modelValue'])
</script>

<style lang="scss">
.text-teld_primary {
  color: var(--t-color) !important;
}

.bg-teld_primary {
  background: var(--t-color) !important;
}
</style>
